<template>
	<screen-page title="储运部综合管理看板">
		<div class="page-screen7-container ver-flex-containter">
			<!-- ********** -->
			<div class="special-blcok special-blcok-size-a hor-flex-containter">
				<div class="divider"></div>
				<div class="flex-block flex-block-grow4">
					<screen-block :title="`出入库任务{${taskProjectCount.total}/${taskProjectCount.complete}/${taskProjectCount.remainder}}`">
						<module1 :data-source="data1" v-if="loaded" />
					</screen-block>
				</div>
				<div class="divider"></div>
				<div class="flex-block flex-block-grow3 ver-flex-containter module_bk">
					<div class="ver-flex-block">
						<module4 ref="module4" :data-source="data4" />
					</div>
					<div class="ver-flex-block">
						<module-center />
					</div>
				</div>
				<div class="divider"></div>
				<div class="flex-block flex-block-grow4">
					<screen-block :title="`保质期预警{共${count}件}`">
						<module2 :data-source="data2" v-if="loaded" />
					</screen-block>
				</div>
				<div class="divider"></div>
			</div>
			<div class="ver-divider"></div>
			<div class="ver-flex-block hor-flex-containter">
				<div class="divider"></div>
				<div class="flex-block">
					<screen-block title="预约">
						<module3 :count-number="data3a_count" :list="data3a_list" v-if="loaded" />
					</screen-block>
				</div>
				<div class="divider"></div>
				<div class="flex-block">
					<screen-block title="收货">
						<module3 :count-number="data3b_count" :list="data3b_list" v-if="loaded" />
					</screen-block>
				</div>
				<div class="divider"></div>
				<div class="flex-block">
					<screen-block title="入库">
						<module3 :count-number="data3c_count" :list="data3c_list" v-if="loaded" />
					</screen-block>
				</div>
				<div class="divider"></div>
				<div class="flex-block">
					<screen-block title="调拨">
						<module3 :count-number="data3d_count" :list="data3d_list" v-if="loaded" />
					</screen-block>
				</div>
				<div class="divider"></div>
				<div class="flex-block">
					<screen-block title="发货">
						<module3 :count-number="data3e_count" :list="data3e_list" v-if="loaded" />
					</screen-block>
				</div>
				<div class="divider"></div>
			</div>
			<!-- ********** -->
		</div>
	</screen-page>
</template>

<script setup>
import { ref, getCurrentInstance, inject, onMounted, onBeforeUnmount, nextTick } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import ScreenBlock from '@/components/ScreenBlock.vue'
import Module1 from './modules/Screen7Module1.vue'
import Module2 from './modules/Screen7Module2.vue'
import Module3 from './modules/Screen7Module3.vue'
import Module4 from './modules/Screen7Module4.vue'
import ModuleCenter from './modules/Screen5Module2.vue'
import { $loading } from '@/assets/js/utils'

const instance = getCurrentInstance()
const $config = inject('$config')
const $api = inject('$api')

let interval = null;

const taskProjectCount = ref({
	total:0,
	complete:0,
	remainder:0
})
const count = ref(0)
const data1 = ref([])
const data2 = ref([])
const data3a_count = ref({
	plan:0,
	complete:0,
	remainder:0,
	prev:0
})
const data3a_list = ref([])
const data3b_count = ref({
	plan:0,
	complete:0,
	remainder:0,
	prev:0
})
const data3b_list = ref([])
const data3c_count = ref({
	plan:0,
	complete:0,
	remainder:0,
	prev:0
})
const data3c_list = ref([])
const data3d_count = ref({
	plan:0,
	complete:0,
	remainder:0,
	prev:0
})
const data3d_list = ref([])
const data3e_count = ref({
	plan:0,
	complete:0,
	remainder:0,
	prev:0
})
const data3e_list = ref([])
const data4 = ref({})
const active2 = ref(0)
const total2 = ref(0)
const loaded = ref(true)

const getData = function(){
	$loading.show()
	loaded.value = false
	Promise.all([
		$api.get('DepotTask',{},{block:'screen7'}),
		$api.get('LocatorSum',{},{block:'screen7'}),
		$api.get('EarlyWarning',{},{block:'screen7'}),
		$api.get('Information',{},{block:'screen7'})
	]).then((response)=>{
		taskProjectCount.value.total = response[0].taskSum || 0
		taskProjectCount.value.complete = response[0].taskBeNumber || 0
		taskProjectCount.value.remainder = response[0].taskNotNumber || 0
		data1.value = response[0].tasks || []
		/* ##################### */
		data4.value = {...(response[1] || {lIdleNumber:0,lStockNumber:0,pIdleNumber:0,pStockNumber:0}),...{loaded:true}}
		nextTick(()=>{
			instance.refs.module4.drawCharts()
		})
		/* ##################### */
		count.value = response[2].goodsSum || 0
		data2.value = response[2].earlyWarnings || []
		/* ##################### */
		data3a_count.value = {
			plan:response[3].subscribeSpecifics.planNumber || 0,
			complete:response[3].subscribeSpecifics.completeNumber || 0,
			remainder:response[3].subscribeSpecifics.surplusNumber || 0,
			prev:response[3].subscribeSpecifics.agoSurplusNumber || 0
		}
		data3a_list.value = response[3].subscribeSpecifics.dockets || []
		/* ##################### */
		data3b_count.value = {
			plan:response[3].collectSpecifics.planNumber || 0,
			complete:response[3].collectSpecifics.completeNumber || 0,
			remainder:response[3].collectSpecifics.surplusNumber || 0,
			prev:response[3].collectSpecifics.agoSurplusNumber || 0
		}
		data3b_list.value = response[3].collectSpecifics.dockets || []
		/* ##################### */
		data3c_count.value = {
			plan:response[3].entrySpecifics.planNumber || 0,
			complete:response[3].entrySpecifics.completeNumber || 0,
			remainder:response[3].entrySpecifics.surplusNumber || 0,
			prev:response[3].entrySpecifics.agoSurplusNumber || 0
		}
		data3c_list.value = response[3].entrySpecifics.dockets || []
		/* ##################### */
		data3d_count.value = {
			plan:response[3].allocateSpecifics.planNumber || 0,
			complete:response[3].allocateSpecifics.completeNumber || 0,
			remainder:response[3].allocateSpecifics.surplusNumber || 0,
			prev:response[3].allocateSpecifics.agoSurplusNumber || 0
		}
		data3d_list.value = response[3].allocateSpecifics.dockets || []
		/* ##################### */
		data3e_count.value = {
			plan:response[3].deliverySpecifics.planNumber || 0,
			complete:response[3].deliverySpecifics.completeNumber || 0,
			remainder:response[3].deliverySpecifics.surplusNumber || 0,
			prev:response[3].deliverySpecifics.agoSurplusNumber || 0
		}
		data3e_list.value = response[3].deliverySpecifics.dockets || []
		/* ##################### */
		loaded.value = true
		$loading.hide()
	}).catch(()=>{
		loaded.value = true
		$loading.hide()
	})
}

const destoryIntervel = function(){
	try{
		window.clearInterval(interval)
		interval = null
	}catch(e){
		//TODO handle the exception
	}
}

const createInterval = function(){
	interval = window.setInterval(getData,$config.base.screen.screen7.intervalTime)
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
})
</script>

<style scoped lang="scss">
.page-screen7-container{
	padding-bottom: 0.68%;
	height: 100%;
	box-sizing: border-box;
	.special-blcok{
		flex-shrink: 0;
	}
	.module_bk{
		background-image: url(@/assets/imgs/module_back.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.special-blcok-size-a{
		height: 40%;
	}
	.ver-flex-block{
		height: 1px;
		flex-grow: 1;
	}
	.flex-block{
		width: 1px;
		flex-grow: 1;
	}
	.flex-block-grow3{
		flex-grow: 3;
	}
	.flex-block-grow4{
		flex-grow: 4;
	}
	.divider{
		width: .14em;
		flex-shrink: 0;
	}
	.ver-divider{
		height: .14em;
		flex-shrink: 0;
	}
}
</style>